import { Component, OnInit, Input, SimpleChanges, OnChanges } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
import { HttpClient } from '@angular/common/http';
import { ScheduledService } from '../scheduled.service';
import { PublicService } from 'app/public/public.service';
import { SELECT_OPTIONS } from 'app/app.constants';
import * as moment from 'moment';
import { BullySubjectService } from 'app/shared/service';

@Component({
    selector: 'itmp-hist-scheduled-event',
    templateUrl: './hist-scheduled-event.component.html',
    styleUrls: ['./hist-scheduled-event.component.css']
})
export class HistScheduledEventComponent implements OnInit, OnChanges {
    @Input() zoneList;

    private _eventData = [];
    private _statusData = [];
    // @Input()
    // set hsEventData(data: EventCate[]) {
    //     if (data && data.length > 0) {
    //         this._eventData = [...data];
    //     }
    // }
    // get hsEventData(): EventCate[] {
    //     return this._eventData;
    // }
    statusList: any;
    // @Input()
    // set hsStatusData(statusData: EventCate[]) {
    //     if (statusData && statusData.length > 0) {
    //         this._statusData = statusData.filter(item => {
    //             const has = item.category === 'EventStatus' && (item.value === '2' || item.value === '3');
    //             if (has) {
    //                 this.statusList.push(item.name);
    //             }
    //             return has;
    //         });
    //     }
    // }
    // get hsStatusData(): EventCate[] {
    //     return this._statusData;
    // }
    @Input() accessButton;
    toolbarList = [
        { className: 'icon-dingwei' },
        { className: 'icon-CCTV' },
        { className: 'icon-dayinfuyin-' },
        { className: 'icon-xiazai' }
    ];
    hsEventData = [];
    hsStatusData = [];
    selectedItem = null;
    renderHeader = null;
    dateRange = [];
    dateUpRange = [];
    queryStartTime = null;
    queryEndTime = null;
    queryUpStartTime = null;
    queryUpEndTime = null;
    id = null;
    zoneId = null;
    roadName = null;
    typeSelect = null;
    statusSelect = null;
    queryData = null;
    listOfData = [];
    lane_blockages = ['arrow-up.png', 'cross.png'];
    // statusList = ['Anticipated', 'Notified', 'Confirmed', 'In Progress', 'Over'];
    // typeList = ['', '', 'Road Works', '', 'Road Maintence'];
    typeList: any;
    // 分页数据的对象
    pagination = {
        totalEle: 25,
        currentPage: 1,
        currentSize: 10,
        pageSize: 10
    };

    constructor(
        private message: NzMessageService,
        private http: HttpClient,
        private SEService: ScheduledService,
        private pub: PublicService,
        private bully: BullySubjectService
    ) {}

    ngOnChanges(changes: SimpleChanges) {
        this.bully.zoneListBehavior.subscribe(res => {
            this.zoneList = res['selectZoneList'];
        });
    }

    _getSelectionList() {
        const res = this.pub.getSelectOptionsList(SELECT_OPTIONS.EVENT_TYPE);
        this.hsEventData = res.data;
        this.typeList = res.object;
        const res2 = this.pub.getSelectOptionsList(SELECT_OPTIONS.EVENT_STATUS);
        this.hsStatusData = res2.data.filter(item => item.value === '2' || item.value === '3');
        this.statusList = res2.object;
    }

    ngOnInit() {
        this._getSelectionList();
        this.refresh();
        this.renderHeader = [
            {
                name: 'Event ID',
                key: null,
                value: 'id',
                isChecked: true
            },
            {
                name: 'Event Type',
                key: null,
                value: 'type',
                isChecked: true
            },
            {
                name: 'Planned Start Date',
                key: null,
                value: 'plannedStartTime',
                isChecked: true
            },
            {
                name: 'Planned End Date',
                key: null,
                value: 'plannedEndTime',
                isChecked: true
            },
            {
                name: 'Zone ID',
                key: null,
                value: 'zoneID',
                isChecked: true
            },
            {
                name: 'Road Name',
                key: null,
                value: 'roadName',
                isChecked: true
            },
            {
                name: 'LaneBlockage',
                key: null,
                value: 'laneBlockage',
                isChecked: true
            },
            {
                name: 'Status',
                key: null,
                value: 'status',
                isChecked: true
            }
        ];
    }

    // 刷新
    refresh() {
        this.queryStartTime = this.getTimeStamp();
        this.queryEndTime = new Date().getTime();
        this.queryUpStartTime = this.getTimeStamp();
        this.queryUpEndTime = new Date().getTime();
        this.queryStartTime = null;
        this.queryEndTime = null;
        this.queryUpStartTime = null;
        this.queryUpEndTime = null;
        this.id = null;
        this.zoneId = null;
        this.roadName = null;
        this.typeSelect = null;
        this.statusSelect = null;
        this.dateRange = null;
        this.dateUpRange = null;
        this.pagination.currentPage = 1;
        this.pagination.pageSize = 10;
        this.getHistoryData();
        // this.message.create('success', 'Refresh the success!');
    }

    // 获取历史列表数据
    getHistoryData() {
        if (this.id === '' || this.zoneId === '' || this.roadName === '' || this.typeSelect === '' || this.statusSelect === '') {
            this.id = null;
            this.zoneId = null;
            this.roadName = null;
            this.typeSelect = null;
            this.statusSelect = null;
        }
        this.queryData = {
            condition: {
                event_ID: this.id,
                event_Type: this.typeSelect,
                planned_start_Time: {
                    startTime: this.queryStartTime,
                    endTime: this.queryEndTime
                },
                planned_end_Time: {
                    startTime: this.queryUpStartTime,
                    endTime: this.queryUpEndTime
                },
                road_Name: this.roadName,
                veri_State: this.statusSelect,
                zone_ID: this.zoneId
            },
            pageNum: this.pagination.currentPage,
            pageSize: this.pagination.pageSize
        };
        this.SEService.getHistoryList(this.queryData).subscribe(res => {
            if (res.messagecode === '000000') {
                this.listOfData = res.data.content;
                this.pagination.currentPage = res.data.pageNum;
                this.pagination.currentSize = res.data.numberOfElements;
                this.pagination.totalEle = res.data.totolElements;
                this.listOfData.forEach(element => {
                    if (element.lane_Blockage != null) {
                        const strSplit = element.lane_Blockage.split('');
                        element.laneBlockage = strSplit;
                    } else {
                        this.message.create('warning', 'Request failed.');
                        this.listOfData = [];
                    }
                });
            }
        });
    }

    // 展示详情
    showDetail(item) {
        this.selectedItem = item;
    }

    onChange(result: Date): void {
        this.queryStartTime = result[0]
            ? moment(result[0])
                  .startOf('day')
                  .valueOf()
            : null;
        this.queryEndTime = result[1]
            ? moment(result[1])
                  .endOf('day')
                  .valueOf()
            : null;
        this.getHistoryData();
    }

    onUpdateChange(result: Date): void {
        this.queryUpStartTime = result[0]
            ? moment(result[0])
                  .startOf('day')
                  .valueOf()
            : null;
        this.queryUpEndTime = result[1]
            ? moment(result[1])
                  .endOf('day')
                  .valueOf()
            : null;
        this.getHistoryData();
    }

    getTimeStamp() {
        const nowdate = new Date();
        nowdate.setMonth(nowdate.getMonth() - 3);
        const y = nowdate.getFullYear();
        const m = nowdate.getMonth() + 1;
        const d = nowdate.getDate();
        const formatwdate = y + '-' + m + '-' + d;
        return new Date(formatwdate).getTime();
    }

    onPageChange(e) {
        this.pagination.currentPage = e;
        this.getHistoryData();
    }

    onSizeChange(e) {
        this.pagination.currentPage = 1;
        this.pagination.pageSize = e;
        this.getHistoryData();
    }

    typeSearch() {
        this.pagination.currentPage = 1;
        this.pagination.pageSize = 10;
        this.getHistoryData();
    }

    filterSearch() {
        this.pagination.currentPage = 1;
        this.pagination.pageSize = 10;
        this.getHistoryData();
    }

    statusSearch() {
        this.pagination.currentPage = 1;
        this.pagination.pageSize = 10;
        this.getHistoryData();
    }

    idSearch() {
        this.pagination.currentPage = 1;
        this.pagination.pageSize = 10;
        this.getHistoryData();
    }

    zoneSearch() {
        this.pagination.currentPage = 1;
        this.pagination.pageSize = 10;
        this.getHistoryData();
    }
}
